<template>
  <div class="page-title">NJU-OASIS</div>
</template>

<script>
export default {
  name: "page-title",
};
</script>

<style scoped lang="scss">
.page-title {
  color: #cce7f8;
  font-family: 'Monoton', cursive;
  text-transform: uppercase;
  animation: shining 0.25s alternate infinite;
}

@keyframes shining {
  // from {
  //   text-shadow: 0 0 2px rgba(182, 211, 207, 0.8),
  //     0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
  //     0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
  //     0 0 54px rgba(15, 115, 223, 0.9);
  // }
  // to {
  //   text-shadow: 0 0 2px rgba(182, 211, 207, 0.9),
  //     0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
  //     0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
  //     0 0 60px rgba(15, 115, 223, 1);
  // }

  from {
    text-shadow: 0 0 2px rgba(182, 211, 207, 0.8),
      0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 223, 67, 0.5),
      0 0 21px rgba(15, 223, 67, 0.9), 0 0 34px rgba(15, 223, 67, 0.8),
      0 0 54px rgba(15, 223, 67, 0.9);
  }
  to {
    text-shadow: 0 0 2px rgba(182, 211, 207, 0.9),
      0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 223, 67, 0.6),
      0 0 22px rgba(15, 223, 67, 0.8), 0 0 38px rgba(15, 223, 67, 0.9),
      0 0 60px rgba(15, 223, 67, 1);
  }
}

</style>
